<template>
    <div id="PlatformSettingsPage">
        <div>
            <el-button type="primary">查询</el-button>
            <el-button @click="addPlatform">新增</el-button>
        </div>
        <div>
            <el-table :data="platforms" style="width: 100%;">
                <el-table-column type="index">

                </el-table-column>
                <el-table-column label="名称">
                    <template #default="scope">
                        {{ scope.row.name }}
                        <span class="table-operation">
                            <el-button size="small" icon="el-icon-edit" circle @click="editPlatform(scope.row)">
                            </el-button>
                            <el-button size="small" type="danger" icon="el-icon-delete" circle
                                @click="deletePlatform(scope.row)">
                            </el-button>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="platformServiceKey" label="支付平台服务  ">

                </el-table-column>
                <el-table-column prop="displayName" label="描述">

                </el-table-column>
            </el-table>
        </div>
    </div>

    <el-dialog :title="editDialogTitle" v-model="dialogVisible" width="40%">
        <div id="dialog-platform-edit">
            <el-form label-position="right" label-width="140px">
                <el-form-item label="名称">
                    <el-input placeholder="请输入平台英文名称（作为关键字）" v-model="editedPlatform.name">

                    </el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input placeholder="请输入平台显示的名称" v-model="editedPlatform.displayName">

                    </el-input>
                </el-form-item>
                <el-form-item label="支付平台解析服务">
                    <el-select style="width: 100%;" placeholder="请选择" clearable
                        v-model="editedPlatform.platformServiceKey">
                        <el-option :class="{'select-2l-item': true}" v-for="(service,index) in registeredServices"
                            :value="service.serviceName" :key="index" :label="service.serviceName">
                            <p><b>{{ service.serviceName }}</b></p>
                            <p style="color: grey;"><small>{{ service.description }}</small></p>
                        </el-option>
                    </el-select>
                </el-form-item>
                <div style="text-align: right;">
                    <el-button size="small" @click="closeDialog">
                        取消
                    </el-button>
                    <el-button size="small" type="primary" @click="savePlatform">
                        保存
                    </el-button>
                </div>
            </el-form>
        </div>
    </el-dialog>

    <el-dialog title="请注意" v-model="confirmDialogVisible">
        <h1>
            请确认要删除此平台数据吗？操作完成后无法恢复！
        </h1>
        <template #footer>
            <el-button @click="cancelDelete">
                取消
            </el-button>
            <el-button type="danger" @click="doDelete">
                确认
            </el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts">
    import {
        defineComponent
    } from "vue";

    import axios from "axios";
    import apiConfig from "../../api/base.ts";

    const api = axios.create({
        baseURL: apiConfig.baseUrl
    })

    export default defineComponent({
        name: "PlatformSetting",
        data() {
            return {
                platforms: [],
                editedPlatform: {
                    name: "",
                    displayName: "",
                    platformServiceKey: ""
                },
                editDialogTitle: "",
                dialogVisible: false,
                selectedToDeletePlatformName: "",
                confirmDialogVisible: false,
                registeredServices: [],
            }
        },
        methods: {
            list() {
                let listLoading = this.$loading({
                    target: "#PlatformSettingsPage"
                })
                api.get("/api/BasicSetting/Platform/ListAll")
                    .then(resp => {
                        if (resp.data.isSuccess) {
                            this.platforms = resp.data.result
                        } else {
                            this.$message({
                                message: resp.data.message,
                                type: "warning"
                            })
                        }

                        listLoading.close()
                    })
                    .catch(err => {
                        this.$message({
                            message: "加载时发生错误",
                            type: "error"
                        })
                        listLoading.close()
                    })
            },
            addPlatform() {
                this.editDialogTitle = "添加平台数据";
                this.editedPlatform = {
                    name: "",
                    displayName: ""
                };

                this.openDialog();
            },
            editPlatform(platform) {
                this.editDialogTitle = "编辑平台数据";

                this.editedPlatform = platform;

                console.log(platform)

                this.openDialog();

            },
            openDialog() {
                this.dialogVisible = true;
            },
            closeDialog() {
                this.dialogVisible = false;
            },
            savePlatform() {
                // 保存
                let data = this.editedPlatform;

                console.log(data);
                let loadingObj = this.$loading({
                    target: "#dialog-platform-edit"
                });

                api.post("/api/BasicSetting/Platform/Save", data)
                    .then(resp => {
                        if (resp.data.isSuccess) {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            loadingObj.close();
                            this.closeDialog();
                            this.list();
                        } else {
                            loadingObj.close();
                            this.$message({
                                message: resp.data.message,
                                type: "warning"
                            });
                        }
                    })
                    .catch(err => {
                        loadingObj.close();
                        this.$message({
                            message: "保存时发生异常，请重试！",
                            type: "error"
                        });
                    })
            },
            deletePlatform(platform) {
                this.selectedToDeletePlatformName = platform.name;
                this.openConfirm();
            },
            openConfirm() {
                this.confirmDialogVisible = true;
            },
            closeConfirm() {
                this.confirmDialogVisible = false;
            },
            doDelete() {
                this.closeConfirm();
                api.post("/api/BasicSetting/Platform/Delete/" + this.selectedToDeletePlatformName)
                    .then(resp => {
                        if (resp.data.isSuccess) {
                            this.$message({
                                message: "删除成功！",
                                type: "success"
                            });
                            this.list();
                        } else {
                            this.$message({
                                message: resp.data.message,
                                type: "warning"
                            });
                        }
                    })
                    .catch(err => {
                        this.$message({
                            message: "删除失败！",
                            type: "error"
                        });
                    })
            },
            cancelDelete() {
                this.selectedToDeletePlatformName = "";
                this.closeConfirm();
            },
            loadRegisteredServices() {
                api.get("/api/BasicSetting/Platform/Registerd")
                    .then(resp => {
                        if (resp.data.isSuccess) {
                            console.log(resp.data.result);
                            this.registeredServices = resp.data.result;
                        }
                    })
            },

        },
        mounted() {
            this.list()
            this.loadRegisteredServices()
        }
    })
</script>

<style>
    span.table-operation {
        display: none;
    }

    .el-table__row:hover span.table-operation {
        display: initial;
    }

    .select-2l-item.el-select-dropdown__item {
        height: 56px;
    }

    .select-2l-item.el-select-dropdown__item p {
        height: 24px;
        margin-top: 0;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>